<template>
    <div>
        <el-button type="info" @click="demo">测试</el-button>
        <section class="box">
            <el-steps :active="step" finish-status="success" simple>
                <el-step title="选择商品分类"></el-step>
                <el-step title="填写商品信息"></el-step>
                <el-step title="设置商品属性"></el-step>
                <el-step title="设置商品库存"></el-step>
            </el-steps>
            <CategoryForm 
                :categoryIds.sync="productData.categoryIds"
                :categoryNames.sync="productData.categoryNames"
                :step.sync="step"
                v-show="step === 0"/>
            
            <BaseForm 
                :step.sync="step"
                @changeProductData="changeProductData"
                v-show="step === 1"/>
            
            <AttrForm
                :step.sync="step"
                v-show="step === 2"/>
        </section>
    </div>
</template>

<script>
    import CategoryForm from '@/views/pms/product/form/categoryForm.vue'
    import BaseForm from '@/views/pms/product/form/baseForm.vue'
    import AttrForm from '@/views/pms/product/form/attrForm.vue'
    export default {
        name: 'Product',
        components: {
            CategoryForm,
            BaseForm,
            AttrForm
        },
        data() {
            return {
                step: 2,
                productData: {
                    categoryIds: [],
                    categoryNames: [],
                },
            }
        },
        computed: {
            statusMessage () {
                if(this.step === 1) {
                    this.preMessage = "已经是第一步啦"
                    this.nextMessage = "下一步，填写商品信息"
                    return
                }
                if(this.step === 2) {
                    this.preMessage = "上一步，填写商品信息"
                    this.nextMessage = "下一步，设置商品属性"
                    return
                }
                if(this.step === 3) {
                    this.preMessage = "上一步，设置商品属性"
                    this.nextMessage = "下一步，设置商品库存"
                    return
                }
                if(this.step === 4) {
                    this.preMessage = "上一步，设置商品库存"
                    this.nextMessage = "点击保存商品信息"
                }
            }
        },
        methods: {
            demo() {
                console.dir("step:" + this.step)
                console.dir(this.productData)
            },
            changeProductData(data) {
                this.productData = {...data, ...this.productData}
            }
        }
    }
</script>

<style scoped lang="less">
    .box {
        height: auto;
        width: 1180px;
        margin: 20px auto 0;
        padding: 1%;
        border: 3px solid #F5F7FA;
    }
</style>